<!-- 添加筛选 -->
<template>
  <div class="condition-container">
    <backgroundBox>
      <div class="mian">
        <div class="item">
          <span>宿舍楼</span>
          <el-select
            v-model="SelData.dormitory"
            placeholder="请选择宿舍楼"
            :style="{ width: `${selectWidthRef}px` }"
          >
            <el-option
              v-for="item in readUserInfo.manageArr"
              :key="item.id"
              :label="item.DormitoryName"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="item">
          <span>楼层</span>
          <el-select
            v-model="SelData.floor"
            :disabled="!floorDataRef"
            placeholder="请选择楼层"
            :style="{ width: `${selectWidthRef}px` }"
          >
            <el-option
              v-for="item in floorDataRef"
              :key="item.id"
              :label="item.floorNumber"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="item">
          <span>房间</span>
          <el-select
            v-model="SelData.room"
            placeholder="请选择房间"
            :disabled="!roomDataRef"
            :style="{ width: `${selectWidthRef}px` }"
          >
            <template v-if="roomDataRef">
              <el-option
                v-for="item in roomDataRef"
                :key="item.id"
                :label="item.roomNo"
                :value="item.id"
              />
            </template>
          </el-select>
        </div>
        <slot></slot>
      </div>
      <div class="but">
        <el-button type="primary" @click="headleSubmit">{{
          butText
        }}</el-button>
        <el-button type="danger" plain @click="headleEmpty" v-if="props.EmptyBut">清空</el-button>
      </div>
    </backgroundBox>
  </div>
</template>

<script setup>
import backgroundBox from "../BackgroundBox/index.vue";
import { ref, reactive, watchEffect, computed } from "vue";
import { getFloor, getRoomNo } from "@/api/dormitoryInfo.js";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";

const props = defineProps({
  butText: {
    type: String,
    default: "检索宿舍",
  },
  EmptyBut:{
    type:Boolean,
    default:false
  }
});
const selectWidthRef = ref(150);
const { readUserInfo } = storeToRefs(useUserStore());

const SelData = reactive({
  dormitory: "",
  floor: "",
  room: "",
});
const floorDataRef = ref(); // 楼层数据
const roomDataRef = ref(); // 房间数据
watchEffect(async () => {
  floorDataRef.value = null;
  SelData.floor = "";
  if (!SelData.dormitory) return;
  const { data } = await getFloor({ dormitoryId: SelData.dormitory });
  floorDataRef.value = data;
});
watchEffect(async () => {
  SelData.room = "";
  roomDataRef.value = null;
  if (!SelData.floor) return;
  const { data } = await getRoomNo({
    dormitoryId: SelData.dormitory,
    floorId: SelData.floor,
  });
  roomDataRef.value = data;
});
const emit = defineEmits(["headleSubmit","headleEmpty"]);
// 提交
const headleSubmit = () => {
  const data = {
    dormitoryData: SelData.dormitory? readUserInfo.value.manageArr.filter(item => item.id === SelData.dormitory) : "",
    floorData: SelData.floor ? floorDataRef.value.filter(item => item.id === SelData.floor) : "",
    roomData: SelData.room ? roomDataRef.value.filter(item => item.id === SelData.room) : "",
  };

  emit("headleSubmit", data);
};
// 清空
const headleEmpty = () =>{
  for (const key in SelData) {
    SelData[key] = ""
  }
  emit('headleEmpty')
}
defineExpose({
  roomId:computed(() => SelData.room ? roomDataRef.value.filter(item => item.id === SelData.room) : "")
})

</script>

<style lang="less" scoped>
.condition-container {
  width: 100%;
  height: 60px;
  .back-container {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mian {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    
    .item {
      margin-right: 30px;
      span {
        margin-right: 10px;
      }
    }
  }
  .but {
    flex: 0 0 auto;
  }
}
</style>